<template>
  <div data-v-upload123 class="upload">
    <div class="main">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="视频投稿" name="video"
          ><el-upload
            class="upload-demo"
            drag
            :auto-upload="false"
            :show-file-list="false"
            action="#"
            :on-change="handleChange"
            accept="video/*"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload></el-tab-pane
        >
        <el-tab-pane label="专栏投稿" name="post">
          <div class="post-form">
            <div class="post-title">
              <el-input
                v-model="postTitle"
                type="text"
                maxlength="30"
                show-word-limit
                placeholder="请输入标题"
                class="post-title-input"
              ></el-input>
            </div>

            <div class="post-content">
              <mavon-editor
                ref="postmd"
                class="post-editor"
                v-model="postContent"
                @imgAdd="$imgAdd"
                @imgDel="$imgDel"
                @change="change"
              />
            </div>

            <div class="post-region">
              <span class="post-tips">请选择专栏分类</span>
              <el-radio-group v-model="postRegion">
                <el-radio-button label="0">音乐</el-radio-button>
                <el-radio-button label="1">游戏</el-radio-button>
                <el-radio-button label="2">动漫</el-radio-button>
                <el-radio-button label="3">生活</el-radio-button>
              </el-radio-group>
            </div>

            <div class="post-cover">
              <span class="post-tips">请选择专栏封面</span>
              <el-upload
                class="avatar-uploader"
                action=""
                :auto-upload="false"
                :show-file-list="false"
                :on-change="coverChange"
              >
                <img v-if="postCover" :src="postCover" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>

            <div class="post-btn">
              <el-button type="primary" @click="uploadPost">发布</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
// 导入组件 及 组件样式
import { mavonEditor } from "mavon-editor";
import { putObject } from "@/upload.js";
import "mavon-editor/dist/css/index.css";

export default {
  name: "Upload",
  data: function () {
    return {
      activeName: "video",
      fileList: [],

      postTitle: "",
      postContent: "",
      html: "",
      postRegion: "3",
      postCover: "",
    };
  },

  components: {
    mavonEditor,
  },

  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },

    handleChange(file, fileList) {
      this.$parent.$data.uploadFile = fileList;

      this.$router.push({
        name: "UploadVideo",
      });
    },

    // 绑定@imgAdd event
    // async $imgAdd(pos, $file) {
    //   // console.log("添加图片");
    //   // 第一步.将图片上传到服务器.
    //   var formdata = new FormData();
    //   formdata.append("image", $file);

    //   this.axios({
    //     url: "upload/postpic",
    //     method: "post",
    //     data: formdata,
    //     headers: { "Content-Type": "multipart/form-data" },
    //   }).then((response) => {
    //     // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
    //     /**
    //      * $vm 指为mavonEditor实例，可以通过如下两种方式获取
    //      * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
    //      * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
    //      */
    //     // console.log(response.data.url);

    //     let url =
    //       "http://127.0.0.1:3000/" + response.data.url.replace(/\\/g, "/");
    //     // console.log(url);

    //     this.$refs.postmd.$img2Url(pos, url);
    //   });
    // },

    async $imgAdd(pos, $file) {
      // 第一步.将图片上传到服务器.
      let result = await putObject($file, "uploads/post").then((data) => {
        return data;
      });

      // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
      this.$refs.postmd.$img2Url(pos, result.url);
    },

    $imgDel() {
      console.log("删除图片");
    },

    // 所有操作都会被解析重新渲染
    change(value, render) {
      // render 为 markdown 解析后的结果[html]
      this.html = render;
      // console.log(this.html);
    },

    async coverChange(file, fileList) {
      // this.postCover = file.raw;
      // this.imageUrl = URL.createObjectURL(file.raw);
      // console.log(this.imageUrl);
      let result = await putObject(file.raw, "uploads/cover").then((data) => {
        return data;
      });

      this.postCover = result.url;
    },

    uploadPost() {
      if (this.postTitle === "") {
        return this.$notify({
          title: "警告",
          message: "请输入标题！",
          type: "warning",
        });
      } else if (this.postRegion === "") {
        return this.$notify({
          title: "警告",
          message: "请选择分类！",
          type: "warning",
        });
      } else if (this.html === "") {
        return this.$notify({
          title: "警告",
          message: "请输入内容！",
          type: "warning",
        });
      } else if (this.postCover === "") {
        return this.$notify({
          title: "警告",
          message: "请上传封面！",
          type: "warning",
        });
      }

      let form = {
        title: this.postTitle,
        content: this.html,
        region: this.postRegion,
        cover: this.postCover,
      };

      this.axios
        .post(`upload/post`, form)
        .then((response) => {
          if (response.data.status === 200) {
            const clear = () => {
              this.postTitle = "";
              this.postContent = "";
              this.html = "";
              this.postRegion = "3";
              this.postCover = "";
            };
            clear();

            this.$notify({
              title: "警告",
              message: "投稿成功！",
              type: "success",
            });
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.upload[data-v-upload123] {
  display: flex;
  width: 100%;

  .main {
    width: 96%;
    margin: auto;
    margin-top: 15px;
    padding: 15px 10px;
    background-color: #fff;
    border-radius: 10px;

    .post-form {
      // .post-title {
      //   background-color: transparent;
      // }

      .post-content {
        width: 100%;
        height: 640px;

        .post-editor {
          width: 100%;
          height: 100%;
        }
      }

      // .post-region {

      // }

      .post-cover {
        .avatar-uploader {
          width: 340px;
          height: 240px;
          border: #eee 1px solid;
          border-radius: 5px;

          .avatar {
            display: block;
            width: 340px;
            height: 240px;
            object-fit: cover;
          }

          .avatar-uploader-icon {
            width: 340px;
            height: 240px;
            line-height: 240px;
            text-align: center;
            font-size: 28px;
            color: #8c939d;
          }
        }
      }

      .post-btn {
        // margin-top: 10px;
        margin-top: 10px;
      }

      .post-tips {
        display: block;
        margin: 10px 0;
      }
    }
  }
}
</style>

<style lang="scss">
.upload[data-v-upload123] {
  .upload-demo {
    display: flex;
    justify-content: center;
    margin-top: 60px;

    .el-upload {
      width: 80%;

      .el-upload-dragger {
        width: 100%;
        height: 400px;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: center;
      }
    }
  }

  .post-title-input {
    font-size: 25px;
    font-weight: 500;

    .el-input__inner {
      height: 76px;
      line-height: 76px;
      border: none;
    }
  }

  .el-tabs__item {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
  }
}
</style>